<<<<<<< HEAD
<!DOCTYPE html>
<html>
<head>
    <style>
        p.f1:first-line
        {
            color: greenyellow;
            font-size: 24px;
        }
        p.myclass:first-letter
        {
            color: #ff0000;
            font-size:xx-large;
        }
        p.youclass:before
        {
            content: "我"
        }
        p.youclass:after
        {
            content: "你"
        }
    </style>
    <meta charset="UTF-8" />
    <title>伪元素</title>
</head>
<body>
    <!-- 
    常用的伪元素:
        1. :before--在某一元素之前插上一些内容
        2. :after--在某一元素之后插入一些内容
        3. :first-letter--为某个元素中文字的首字母或第一个字使用样式
        4. :first-line--为某个元素中文字的第一行使用样式
        5. :selection--匹配被用户选中或者处于高亮状态下的部分
        6. :placeholder--匹配占位符的文本,只有元素设置了placeholder属性时,该伪元素才能生效
     -->
        <p class="f1">
            对文本首行使用特殊样式<br>可以使用"first-line"伪元素
        </p>
        <p class="myclass">
            使用"first-letter"对文本首字使用特殊样式
        </p>
        <p class="youclass">
            喜欢
        </p>
</body>
=======
<!DOCTYPE html>
<html>
<head>
    <style>
        p.f1:first-line
        {
            color: greenyellow;
            font-size: 24px;
        }
        p.myclass:first-letter
        {
            color: #ff0000;
            font-size:xx-large;
        }
        p.youclass:before
        {
            content: "我"
        }
        p.youclass:after
        {
            content: "你"
        }
    </style>
    <meta charset="UTF-8" />
    <title>伪元素</title>
</head>
<body>
    <!-- 
    常用的伪元素:
        1. :before--在某一元素之前插上一些内容
        2. :after--在某一元素之后插入一些内容
        3. :first-letter--为某个元素中文字的首字母或第一个字使用样式
        4. :first-line--为某个元素中文字的第一行使用样式
        5. :selection--匹配被用户选中或者处于高亮状态下的部分
        6. :placeholder--匹配占位符的文本,只有元素设置了placeholder属性时,该伪元素才能生效
     -->
        <p class="f1">
            对文本首行使用特殊样式<br>可以使用"first-line"伪元素
        </p>
        <p class="myclass">
            使用"first-letter"对文本首字使用特殊样式
        </p>
        <p class="youclass">
            喜欢
        </p>
</body>
>>>>>>> 253c20736630846899487801ab3c2974bb2ec002
</html>